import React from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { Dropdown, Radio } from 'antd-mobile'
import { DownOutline } from 'antd-mobile-icons'
import { Tabs } from 'antd-mobile'

function App() {
  return (
    <div>
      <NavBar>上海—北京</NavBar>
      <Dropdown arrow={<DownOutline />}>
        <Dropdown.Item key='sorter' title='今天'>
          <div style={{ padding: 12 }}>
          </div>
        </Dropdown.Item>
        <Dropdown.Item
          key='bizop'
          title='明天'
        >
          <div style={{ padding: 12 }}>
          </div>
        </Dropdown.Item>
        <Dropdown.Item key='more' title='周日'>
          <div style={{ padding: 12 }}>
          </div>
        </Dropdown.Item>
        <Dropdown.Item key='more' title='周一'>
          <div style={{ padding: 12 }}>
          </div>
        </Dropdown.Item>
        <Dropdown.Item key='more' title='周二'>
          <div style={{ padding: 12 }}>
          </div>
        </Dropdown.Item>
      </Dropdown>

      <Tabs>
        <Tabs.Tab title='火车' key='fruits'>
          <div style={{ border: "soild 1px black" }}>
            <div style={{ display: "flex" }}>
              <h3>12.45</h3>
              <span>22时12分</span>
              <h3>10.27+1</h3>
              <span>￥152.5起</span>
            </div>
            <span>上海站</span>
            <span>1462</span>
            <span>北京丰台站</span>
          </div>

          <div style={{ border: "soild 1px black" }}>
            <div style={{ display: "flex" }}>
              <h3>12.45</h3>
              <span>22时12分</span>
              <h3>10.27+1</h3>
              <span>￥152.5起</span>
            </div>
            <span>上海站</span>
            <span>1462</span>
            <span>北京丰台站</span>
          </div>

          <div style={{ border: "soild 1px black" }}>
            <div style={{ display: "flex" }}>
              <h3>12.45</h3>
              <span>22时12分</span>
              <h3>10.27+1</h3>
              <span>￥152.5起</span>
            </div>
            <span>上海站</span>
            <span>1462</span>
            <span>北京丰台站</span>
          </div>

          <div style={{ border: "soild 1px black" }}>
            <div style={{ display: "flex" }}>
              <h3>12.45</h3>
              <span>22时12分</span>
              <h3>10.27+1</h3>
              <span>￥152.5起</span>
            </div>
            <span>上海站</span>
            <span>1462</span>
            <span>北京丰台站</span>
          </div>

          <div style={{ border: "soild 1px black" }}>
            <div style={{ display: "flex" }}>
              <h3>12.45</h3>
              <span>22时12分</span>
              <h3>10.27+1</h3>
              <span>￥152.5起</span>
            </div>
            <span>上海站</span>
            <span>1462</span>
            <span>北京丰台站</span>
          </div>

          <div style={{ border: "soild 1px black" }}>
            <div style={{ display: "flex" }}>
              <h3>12.45</h3>
              <span>22时12分</span>
              <h3>10.27+1</h3>
              <span>￥152.5起</span>
            </div>
            <span>上海站</span>
            <span>1462</span>
            <span>北京丰台站</span>
          </div>

          <div style={{ border: "soild 1px black" }}>
            <div style={{ display: "flex" }}>
              <h3>12.45</h3>
              <span>22时12分</span>
              <h3>10.27+1</h3>
              <span>￥152.5起</span>
            </div>
            <span>上海站</span>
            <span>1462</span>
            <span>北京丰台站</span>
          </div>

          <div style={{ border: "soild 1px black" }}>
            <div style={{ display: "flex" }}>
              <h3>12.45</h3>
              <span>22时12分</span>
              <h3>10.27+1</h3>
              <span>￥152.5起</span>
            </div>
            <span>上海站</span>
            <span>1462</span>
            <span>北京丰台站</span>
          </div>

          <div style={{ border: "soild 1px black" }}>
            <div style={{ display: "flex" }}>
              <h3>12.45</h3>
              <span>22时12分</span>
              <h3>10.27+1</h3>
              <span>￥152.5起</span>
            </div>
            <span>上海站</span>
            <span>1462</span>
            <span>北京丰台站</span>
          </div>

          <div style={{ border: "soild 1px black" }}>
            <div style={{ display: "flex" }}>
              <h3>12.45</h3>
              <span>22时12分</span>
              <h3>10.27+1</h3>
              <span>￥152.5起</span>
            </div>
            <span>上海站</span>
            <span>1462</span>
            <span>北京丰台站</span>
          </div>

          <div style={{ border: "soild 1px black" }}>
            <div style={{ display: "flex" }}>
              <h3>12.45</h3>
              <span>22时12分</span>
              <h3>10.27+1</h3>
              <span>￥152.5起</span>
            </div>
            <span>上海站</span>
            <span>1462</span>
            <span>北京丰台站</span>
          </div>



          <div style={{ border: "soild 1px black" }}>
            <div style={{ display: "flex" }}>
              <h3>12.45</h3>
              <span>22时12分</span>
              <h3>10.27+1</h3>
              <span>￥152.5起</span>
            </div>
            <span>上海站</span>
            <span>1462</span>
            <span>北京丰台站</span>
          </div>
        </Tabs.Tab>
        <Tabs.Tab title='中转' key='vegetables'>
          中转
        </Tabs.Tab>
      </Tabs>
    </div>
  )
}

export default App
